<template>
  <el-container style="height: 100vh;">
    <!-- 顶部导航栏 -->
<!--    <el-header class="top-nav">-->
<!--      <h2 class="title">和谐大功率机车车载数据专家分析系统 - 数据筛选</h2>-->
<!--    </el-header>-->
    <el-container>
      <el-aside class="sidebar">
        <el-menu
          :default-openeds="['1']"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(menu, index) in menuItems"
            :key="index"
            :index="menu.index"
            @click="handleMenuItemClick(menu.label)"
          >
            <i :class="menu.icon" />{{ menu.label }}
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <el-row>
          <el-col :span="18">
            <el-row>
              <TrainAnalysisInfo />
            </el-row>
            <el-row>
              <el-card style="background-color: #F0FFFF" body-style="padding:0px">
                <div slot="header">
                  <span>原始数据</span>
                </div>
                <div style="overflow-y: auto; height: 100px;">
                  <el-table
                    :data="tableData"
                    style="width: 100%;"
                    border
                    size="mini"
                    :row-style="{ height: '5px' }"
                    :cell-style="{ padding: '0px' }"
                  >
                    <el-table-column
                      v-for="column in columns"
                      :key="column.prop"
                      :prop="column.prop"
                      :label="column.label"
                      :cell-style="{ padding: '0px' }"
                      :min-width="column.prop === '发生时间' ? 150 : undefined"
                    />
                  </el-table>
                </div>
              </el-card>
            </el-row>

            <el-row>
              <TrainAnalysisTable />
            </el-row>

          </el-col>
          <el-col :span="6">
            <TrainAnalysisList />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>数据筛选导出</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import TrainAnalysisInfo from './components/TrainAnalysisInfo'
import TrainAnalysisTable from './components/TrainAnalysisTable'
import TrainAnalysisList from './components/TrainAnalysisList'

export default {
  components: {
    TrainAnalysisInfo,
    TrainAnalysisTable,
    TrainAnalysisList
  },
  data() {
    return {
      dialogVisible: false,
      columns: [
        { prop: '故障代码', label: '故障代码' },
        { prop: '故障名称', label: '故障名称' },
        { prop: '故障位码', label: '故障位码' },
        { prop: '故障等级', label: '故障等级' },
        { prop: '发生时间', label: '发生时间' },
        { prop: '机车速度', label: '机车速度' },
        { prop: '网压', label: '网压' },
        { prop: '原边电流', label: '原边电流' },
        { prop: '行驶方向', label: '行驶方向' },
        { prop: '级', label: '级' }
      ],
      tableData: [
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' }
      ],
      menuItems: [
        { label: '筛选数据导出', index: '1-1', icon: 'el-icon-upload2' }
      ],
      downloadStatuses: [
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        }
      ],
      downloadList: [
        {
          operator: '李四',
          downloadStatus: '已完成',
          downloadingModel: 'HXD3B-5678',
          downloadProgress: 100,
          dumpingModel: 'HXD3B-5678',
          dumpingStatus: '已完成',
          dumpingProgress: 100
        }
      ]
    }
  },
  methods: {
    handleMenuItemClick(item) {
      this.dialogVisible = true
      console.log(`Menu item clicked: ${item}`)
      // 处理菜单点击逻辑
    },
    updateDownloadStatus(status) {
      // 更新下载状态逻辑
      console.log('Download status updated:', status)
    }
  }
}
</script>

<style scoped>

.top-nav {
  background-color: #409EFF;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}

.title {
  margin: 0;
}

.sidebar {
  width: 220px !important;
  background-color: #545c64;
  color: #fff;
  height: 100%;
  transition: width 0.3s;
}

.sidebar .el-menu {
  border-right: none;
}

.main-content {
  background-color: #ffffff;
  padding: 20px;
  transition: padding 0.3s;
}

/* 添加过渡效果 */
.el-menu-item:hover {
  background-color: #434a50 !important;
}

/* 媒体查询调整侧边栏宽度 */
@media (max-width: 992px) {
  .sidebar {
    width: 150px !important;
  }

  .main-content {
    padding: 10px;
  }
}
</style>
